<template>
    <div id="userinfo">
        <Button type="info" style="margin: 10px" @click="back()">返回</Button>
        <div style="padding: 10px;font-size: 32px;letter-spacing: 5px;text-align: center;color: #444444">修改用户信息</div>
        <div style="text-align: center">
            <div style="font-size: 15px;text-align: center;padding: 10px;margin-top: 15px">用户头像</div>
            <Upload :show-upload-list="false" :format="['jpg','jpeg','png']" :on-exceeded-size="maxSize"
                    :max-size="1024" action="http://192.168.1.110:9090/api/upload" :before-upload="before"
                    :on-success="success" :on-erroe="error">
                <Button icon="ios-cloud-upload-outline">请选择修改头像图片</Button>
            </Upload>
            <img :src="headerImg" alt=""
                 style="margin-top: 15px;width: 100px;height: 100px;border-radius: 50%;border: 1px solid #444">
            <div style="font-size: 15px;text-align: center;padding: 0px;margin-top: 25px">修改密码</div>
            <br>
            <Input v-model="password1" type="password" placeholder="新密码" style="width: 240px;margin-top: 0px"/>
            <br>
            <Input v-model="password2" type="password" placeholder="重复输入密码" style="width: 240px;margin-top: 10px"/>
            <br>
            <Button type="info" style="margin-top: 15px" @click="setUserInfo()">确认修改</Button>
        </div>
        <div id="loading" v-if="loading">
            <div class="spinner">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import Axios from 'axios';
    import ipServer from '../model/ip';
    import sessionUtils from '../model/sessionUtils';
    export default{
        data(){
            return {
                headerImg: null,
                loading: false,
                password1: "",
                password2: "",
            }
        }, methods: {
            before(){
                this.loading = true;
            },
            success(res1){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                param.append('headImg', res1.data.url);
                param.append('password', this.password1);

                Axios.post(ipServer + "manageUser/updateManageUserByMobile", param)
                        .then(res => {
                            this.loading = false;
                            if (res.data.code == 0) {
                                this.headerImg = res1.data.url;
                                sessionUtils.setSession("headerImg", res1.data.url);
                                sessionUtils.setSession("token", res.data.token);
                                this.$Message.info("上传成功!");
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            },
            error(err){
                this.loading = false;
                this.$Message.info(srr);
            }, maxSize(){
                this.loading = false;
                this.$Message.info("上传图片过大!");
            }, back(){
                if (sessionUtils.getSession("roleId") == "1") {
                    this.$router.push("/superAdmin");
                } else {
                    this.$router.push("/commonAdmin");
                }
            }, setUserInfo(){
                if (this.password1.length < 6) {
                    this.$Message.info("输入的密码长度小于6位!");
                    return;
                }

                if (!(this.password1 && this.password1 == this.password2)) {
                    if (!this.password1 || !this.password2) {
                        this.$Message.info("请输入修改的密码!");
                        return;
                    }

                    if (!(this.password1 == this.password2)) {
                        this.$Message.info("两次输入密不一致码!");
                        return;
                    }


                }


                this.loading = true;
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                param.append('headImg', this.headerImg);
                param.append('password', this.password1);

                Axios.post(ipServer + "manageUser/updateManageUserByMobile", param)
                        .then(res => {
                            this.loading = false;
                            if (res.data.code == 0) {
                                sessionUtils.clear()
                                this.$router.push("/login");
                                this.$Message.info("修改成功!");
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            }

        },
        mounted(){
            this.headerImg = sessionUtils.getSession("headerImg")
            if (!sessionUtils.getSession("token")) {
                this.$router.push("/login");
            }
        }
    }

</script>

<style scoped>
    @import "../assets/css/loading.css";

</style>